{% extends "layout.html" %} {% block app %}
<script src="https://cdn.bootcss.com/spark-md5/3.0.0/spark-md5.min.js"></script>
<script src="/public/js/upload.js"></script>
<div id="app" style="width:80%; margin:10 auto; padding:10px; border:3px solid #ccc">
    <div class="field">
        <label class="label">粘贴板</label>
        <div class="control">
            <textarea class="textarea" v-model="content">content</textarea>
        </div>
        <label class="label">WARN</label>
        <label class="file-label file is-info">
            <input class="file-input" type="file" name="resume">
            <span class="file-cta">
                <span class="file-icon">
                    <i class="fas fa-upload"></i>
                </span>
                <span class="file-label">
                    Primary file…
                </span>
            </span>
        </label>
    </div>
    <div class="is-grouped">
        {% raw %}{%endraw%}
        <button class="button is-primary" v-on:click.prevent="create">保存</button>
        <button class="button is-light" v-on:click.prevent="add_sub">Reset</button>
    </div>
</div>
<script>
    var tmpBlob = new File(['hello'], 'a.png', {type:'image/png'});

//new Upload('/api/clipboard/uploadFile?a=1', tmpBlob, 'ahuixxx.png', 1).success(d=>console.info(d)).fail(d=>console.error(d))
const alert = console.log
    var vm = new Vue({
        el: '#app',
        data: {
            content: 'test',
        },
        created() {
            var that = this
            var id = location.hash.slice(1)
            fetch('/api/clipboard/'+id, {
                credentials: 'include'
            })
            .then(response => response.json()).then(json => {
                if (json.content) {
                    that.content = json.content
                    that.msg = ('init')
                } else {
                    alert(json[1])
                }
            }).catch(e => alert(e))
        },
        methods: {
            'create': function (e) {
                const vm = this
                //var form_data = new FormData(this.data)
                //form_data['content'] = this.content
                console.log({content: vm.content})
                fetch('/api/clipboard', {
                    credentials: 'include',
                    method: 'POST',
                    headers:{
                        'content-type':'application/json',
                        'X-requested-with': 'XMLHttpRequest',
                        "Accept": "application/json", 
                    },
                    body: JSON.stringify({content: vm.content}),
                })
                .then(response => response.json()).then(json => {
                    location.hash='#'+json.id
                }).catch(e => alert(e))
            }
        }
    })
</script> {% endblock %}